#include("./layout.html")
#@layout()

#define script()
      <script type="text/javascript">

        function substrLength2(element, length) {  //elementId：元素id，length：需保留字符串长度
            // var text = document.getElementById(elementId);
            
            var result = "";
            if (element.innerText.length > length) {
                result = element.innerText.substr(0, length) + "...";
            } else {
                result = element.innerText;
            }
            element.innerText = result;
            var url = element.getAttribute("url");
            element.innerHTML += '<a href="'+ url +'" style="color:#C0272C;font-size:13px;padding-left: 10px; font-family:微软雅黑;">[查看更多]</a>'
        }

        function formatArticleContent() {
            var elements = document.getElementsByName("article-item-content")
            for (i = 0; i < elements.length; i++) {
                substrLength2(elements[i], 160)
            }
        }

        formatArticleContent()


    </script>
#end

#define content()

<div class="container" style="min-height: 65vh">
    
    <div class="col-xs-12 col-sm-12 col-md-3 " style=" margin-top: 10px" id="topic-list">
                       
        <div id="recommend-for-you">
            <div class="topic-item-header">
                <span style="font-size: 18px;">为您推荐</span>
            </div>
            
             #articles(orderBy = "id desc",count = 6,withRecommend=true,withTop=true)

                #for(article :articles)
            
                    
                    <div class="recommend-new-item">
                        <img src="img/right_arrow.svg">
                        <a href="#(article.url)">#(article.title ??)</a>
                    </div>
            
                #end
            #end

        </div>
        
    </div>


    <div class="col-xs-12 col-sm-12 col-md-9 g_clear_margin" id="article-list">
    
        #articleSearchPage()
    
            #if(articlePage && articlePage.list.size() > 0)
                #for(article : articlePage.list)
                    <div class="article-item-container" style="margin-top: 10px">
                        <!-- 文章内容 -->
                        <div class="article-item">
                            <a href="#(article.url)" target="_self">
                                <div style="font-size:20px">#(article.highlightTitle)</div>
                            </a>
                            <div style="display: flex; align-items: center; justify-content: start;">
                                <p class="article-item-content" id="article-item-content" name="article-item-content" url="#(article.url)">
                                    #(article.highlightContent)
                                </p>
                                <!-- 图片内容 -->
                                #if(article.thumbnail)
                                     <div class="new-item-right-container">
                                        <img class="new-item-right-img" src="#(article.thumbnail)"></img>
                                    </div>
                                #end
                            </div>
        
        
                            <div class="article-item-footer">
                                <span>#(article.created)</span>
                                <img src="img/browse-ege.svg"></img>
                                <div class="article-browse-num">#(article.view_count)</div>
                            </div>
                        </div>
                        
                                               
                    </div>
                #end
        
        
                #articleSearchPaginate(firstGotoIndex=true)
                <div style="display: flex; justify-content: center;">
                <nav aria-label="">
                    <ul class="pagination justify-content-center">
                        #for(page : pages)
                        <li class="page-item #(page.style)"><a class="page-link" href="#(page.url ??)">#(page.text)</a></li>
                        #end
                    </ul>
                </nav>
                </div>
                #end
            
        
            #else
                <div class="cl-card">
                    没有找到关于 <span style="color: red">#(keyword ??)</span> 的任何文章
                </div>
            
            #end
        
        #end
    
    </div>
    
    
</div>

#end